“Wostix” Documentation by “techsometimes” v1.0

“Wostix”

Created: 23/02/2023
Updated: 19/11/2024
By: techsometimes

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!

Table of Contents

  1. HTML Structure
  2. Template Components
  3. CSS Files and Structure
  4. JavaScript
  5. Sources and Credits
  6. PHP Code Explanation

A) HTML Structure - top

Below is the general HTML structure of the landing page.

1) index.html File Structure - top

The template page's layout consist of top that show the logo and main menu, hero section that show background image, before content that show some amaizing content, about section contain about your some info & feature, service section contained all services, work section you can showcase your portfolio with awesome animation, skills section here you can add some skills, team section is for your team members, testimonial section here you can published your customer reviews, call to action this for call to action content, contact section here you can put your contact information & footer that show copyright information.

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
       
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="Waste Pickup & Disposal Services HTML Template">
        <meta name="author" content="techsometimes">
       
        <title>Wostix | Waste Pickup & Disposal Services HTML5 Template</title>
        
		<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
		
       
        <link rel="stylesheet" href="assets/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/css/animate.min.css">
        <link rel="stylesheet" href="assets/css/fontawesome.min.css">
        <link rel="stylesheet" href="assets/css/odometer.min.css">
        <link rel="stylesheet" href="assets/css/spotlight.css">
        <link rel="stylesheet" href="assets/css/venobox.min.css">
        <link rel="stylesheet" href="assets/css/keyframe-animation.css">
        <link rel="stylesheet" href="assets/css/swiper.min.css">
        <link rel="stylesheet" href="assets/css/slider.css">
        <link rel="stylesheet" href="assets/css/main.css">
        <link rel="stylesheet" href="assets/css/responsive.css">

    </head>
    
    <body>
    <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
       
        <div class="site-preloader">
            <div class="spinner"></div>
        </div><!--site preloader-->
        
        <header class="header">
            
        </header><!-- /.Main Header -->

        <div id="popup-search-box">
            
        </div><!-- /#popup-search-box -->
        
        <section class="hero-section padding">
            
        </section><!-- ./ hero-section -->
        
        <div id="main-slider" class="dl-slider">
            
        </div><!-- slider-section -->
        
        <section class="about-section padding">
            
        </section><!-- ./ about-section -->
        
        <section class="service-section bg-grey padding">
            
        </section><!-- ./service-section -->
        
        <section class="skill-section padding">
           
        </section><!-- /.skill-section -->
        
        <section class="company-section">
            
        </section><!-- ./ company-section -->
        
        <section class="tesimonial-section padding">
            
        </section><!-- ./ tesimonial-section -->
            
		<section class="project-section padding">
		  
		</section><!-- project-section -->
        
        <section class="content-section bg-grey padding">
            
        </section><!-- ./ content-section-->
        
        <section class="promo-section bg-grey padding">
            
        </section><!-- ./ promo-section-->
        
        <section class="cta-section bg-grey padding">
            
        </section><!-- ./ cta-section-->
        
        <section class="rent-section padding">
            
        </section><!-- ./ rent-section-->
        
        <section class="faq-section padding">
            
        </section><!-- ./ faq-section-->
        
        <section class="sponsor-section">
           
        </section><!-- ./ sponsor-section -->
        
        <section class="blog-section">
           
        </section><!-- ./ blog-section -->
        
        <section class="social-section">
           
        </section><!-- ./ social-section -->
        
        <section class="connect-section">
           
        </section><!-- ./ connect-section -->
        
        <section class="widget-section padding">
           
        </section><!-- ./ widget-section -->
       
        <div id="scrollup">
            <button id="scroll-top" class="scroll-to-top"><i class="fa-regular fa-arrow-up-long"></i></button>
        </div><!--scrollup-->

		<!--jQuery Lib-->
		<script src="assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
		<script src="assets/js/vendor/jquary-3.6.0.min.js"></script>
		<script src="assets/js/vendor/jquery.ajaxchimp.min.js"></script>
		<script src="assets/js/vendor/bootstrap.min.js"></script>
		<script src="assets/js/vendor/popper.min.js"></script>
		<script src="assets/js/vendor/odometer.min.js"></script>
		<script src="assets/js/vendor/waypoints.min.js"></script>
		<script src="assets/js/vendor/venobox.min.js"></script>
        <script src="assets/js/vendor/spotlight.min.js"></script>
		<script src="assets/js/vendor/masonry-docs.min.js"></script>
		<script src="assets/js/vendor/swiper.min.js"></script>
		<script src="assets/js/vendor/imagesloaded.pkgd.min.js"></script>
		<script src="assets/js/vendor/jquery.isotope.v3.0.2.js"></script>
		<script src="assets/js/vendor/wow.min.js"></script>
		<script src="assets/js/contact.js"></script>
		<script src="assets/js/slider.js"></script>
		<script src="assets/js/main.js"></script>
   
    </body>
</html>

B) Template Components - top

The site is made of many sections like header, slider, testimonials, services and more...

<header class="header header-1">
   <div class="top-header">
	   <div class="container">
		   <div class="top-header-wrap">
			   <div class="top-left-content">
				   <ul class="top-social">
					   <li class="social-item">
						   <div class="dot"></div>
						   <a href="#">Facebook</a>
					   </li>
				   </ul>
			   </div>
			   <div class="top-content">
				   <h4><a href="#">Login/Sign in</a></h4>
			   </div>
			   <div class="top-right-content">
				   <ul class="top-list">
					   <li><img src="assets/img/flag-1.svg" alt="flag">
						   <select class="ddl-select" id="list" name="list">
							  <option value="english">English</option>
							</select>
					   </li>
				   </ul>
			   </div>
		   </div>
	   </div>
   </div>
	<div class="primary-header primary-header">
		<div class="container">
			<div class="primary-header-inner">
			   <div class="side-menu-icon">
				   <span></span>
			   </div>
				<div class="header-logo">
					<a href="index.html">
						<img class="light" src="assets/img/logo.png" alt="Logo"/>
					</a>
				</div><!-- /.header-logo -->
				<div class="header-menu-wrap nav-style-1">
					<ul class="slider-menu">
						<li class="active"><a href="index.html">Home</a>
							<ul>
								<li><a href="index.html">Home One</a></li>
							</ul>
						</li>
					</ul>
				</div><!-- /.header-menu-wrap -->
				<div class="header-right">
					<div class="search-icon dl-search-icon"><i class="fa-regular fa-magnifying-glass"></i></div>
					<a class="default-btn" href="contact.html">Request Pickup<span></span></a>
					<!-- Burger menu -->
					<div class="mobile-menu-icon">
						<div class="burger-menu">
							<div class="line-menu line-half first-line"></div>
						</div>
					</div>
				</div><!-- /.header-right -->
			</div><!-- /.primary-header-inner -->
		</div>
	</div><!-- /.primary-header -->
</header><!-- /.Main Header -->

2) Hero Section - top


<section class="hero-section padding">
   <div class="arrow"></div>
	<div class="btn-area-wrap">
		<div class="btn-area">
			<div class="container">
				<div class="row">
					<div class="col-md-4">
						<div class="btn-box text-center">
							<a href="contact.html">Find my city</a>
						</div>
					</div>
				</div>
			</div>
		</div> <!-- ./ btn-area -->
	</div>
	<div class="container">
		<div class="hero-content">
			<h2>Since 1992</h2>
			<h1>Discover 
			<div class="video-popup-box">
				<a class="video-popup" data-autoplay="true" data-vbtype="video" href="https://youtu.be/iyd7qUH3oH0"><i class="fa-solid fa-play"></i></a>
			</div>
			<span>Service</span></h1>
		</div>
	</div>
</section><!-- ./ hero-section -->

3) Slider Section - top


<section class="slider-section">
	<div class="wostix-slider swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<div class="slide-img-wrap">
					<img decoding="async" src="assets/img/slider-img-1.jpg" alt="Home One Business" class="slide-img kenburns kenburns-top" style="animation-duration: 12000ms;" />
				</div>
				<div class="overlay"></div>
				<div class="slider-content-wrap">
					<div class="content-width">
						<div class="slider-content">
							<div class="wostix-caption heading">
								<div class="inner-layer">
									<div class="wostix-cap" data-animation="wostix-fadeInUp" data-delay="1200ms" data-duration="1000ms">Commercial Trash Pickup & <br>Recycling Services</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="wostix-slider-controls">
			<div class="wostix-fraction">
				<div class="current-count"></div>
				<div class="sep">
					<div class="swiper-slider-progress"></div>
				</div>
				<div class="total-count"></div>
			</div>
			<div class="wostix-swiper-pagination"></div>
		</div>
		<div class="slider-preloader">
			<div class="dot-flashing"></div>
		</div>
	</div>
</section><!-- ./ slider-section -->

4) About Section - top


<section class="about-section bg-pink padding">
	<div class="container">
		<div class="row align-items-center">
			<div class="col-lg-6 sm-padding">
				<div class="about-content">
					<div class="section-heading mb-30">
					   <div class="sub-heading">
						   <span>About Wostix</span>
					   </div>
					   <h2>Dumpster Rentals & <br>Waste Management <br>Services</h2>
					   <p><span>There are many variations of passages of Lorem Ipsum available, majority have suffered alteration in some form,</span></p>
					   <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatu aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem nesciunt. Neque porro quisquam est, </p>
					</div>
					<div class="about-btn">
						<a href="about-us.html" class="default-btn">Explore More <span></span></a>
						<div class="at-box">
							<div class="author-group">
							   <img src="assets/img/author-group.png" alt="author">
							</div>
							<div class="rating-box">
								<ul class="ratings">
									<li><i class="fa-sharp fa-solid fa-star"></i></li>
								</ul>
								<h4>Orginal reviews</h4>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-6 sm-padding">
				<div class="about-box">
					<ul class="about-list">
						<li class="list-item">
							<a href="about-us.html"><h3>Residential Waste</h3></a>
							<p>Nemo enim ipsam voluptatem voluptas </p>
							<div class="about-icon">
								<img src="assets/img/about-icon-6.svg" alt="img">
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</section><!-- ./ about-section -->

5) Service Section - top


<section class="service-section padding">
	<div class="container">
		<div class="section-heading text-center mb-60">
		   <div class="sub-heading">
			   <span>Our Services</span>
		   </div>
		   <h2>Few Reasons Why You Choose <br>Us Protect Your Self</h2>
		</div>
		<div class="service-carousel-wrap">
			<div class="outside-spacing">
				<div class="service-carousel swiper">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="service-content">
								<div class="service-thumb">
									<img src="assets/img/service-1.svg" alt="service">
								</div>
								<a href="service.html"><h3>Controlled Waste</h3></a>
								<p>Nemo enim ipsam voluptatem voluptas sit aspernatu aut odit aut consequuntur magni.</p>
								<div class="service-btn">
									<a href="service-details.html">Continue Reading +</a>
								</div>
							</div>
						</div>
					</div>
					<!-- Carousel Arrows -->
					<div class="swiper-arrow">
						<div class="swiper-nav swiper-next"><i class="fa-regular fa-arrow-right-long"></i></div>
					</div>
					<!-- Carousel Dots -->
					<div class="swiper-pagination"></div>
				</div>
			</div>
		</div>
	</div>
</section><!-- ./ service-section -->

6) Skills Section - top


<section class="skill-section">
   <div class="bg-shape"><img src="assets/img/page-header-shape-1.png" alt="shape"></div>
	<div class="container">
		<div class="row">
			<div class="col-lg-6 sm-padding">
				<div class="skill-content">
					<div class="section-heading mb-30">
					   <div class="sub-heading">
						   <span>Our Skills & Expertise</span>
					   </div>
					   <h2>We take care of your <br>waste responsibly.</h2>
					   <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,</p>
					</div>
					<ul class="skills-items">
						<li class="skills-item">
							<h5>Quality Control System</h5>
							<div class="progress">
								<div class="progress-bar wow slideInLeft" data-wow-delay="0ms" data-wow-duration="2000ms" role="progressbar" style="width: 80%; visibility: visible; animation-duration: 2000ms; animation-delay: 0ms; animation-name: slideInLeft;">
									<span>85%</span>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="col-lg-6 sm-padding">
				<div class="skill-box">
				   <div class="skill-bg"></div>
					<div class="video-box">
						<div class="skill-video-popup-box">
							<a class="video-popup" data-autoplay="true" data-vbtype="video" href="https://youtu.be/iyd7qUH3oH0"><i class="fa-solid fa-play"></i></a>
						</div>
					</div>
					<div class="skill-info">
						<div class="info-item">
							<h3>+<span class="odometer" data-count="50">00</span></h3>
							<p>Daily Customer</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section><!-- skill-section -->

7) Company Section - top


<section class="company-section padding">
	<div class="container">
		<div class="row align-items-center">
			<div class="col-md-6 sm-padding">
				<div class="company-content">
					<div class="section-heading">
					   <div class="sub-heading">
						   <span>trusted company</span>
					   </div>
					   <h2>Rececle Today <br>For A Better Tomorrow</h2>
					   <a href="about-us.html" class="default-btn">Explore More <span></span></a>
					</div>
				</div>
			</div>
			<div class="col-md-6 sm-padding">
				<div class="row" data-masonry='{":percentPosition": true}'>
					<div class="col-md-6 padding-15">
						<div class="company-box text-center">
							<h3><span class="odometer" data-count="6.4">00</span>k+</h3>
							<p>Projects Done</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section><!-- ./ company-section -->

8) Testimonial Section - top


<section class="testimonial-section bg-pink padding">
   <div class="bg-map"><img src="assets/img/bg-map.png" alt="map"></div>
    <div class="container">
        <div class="section-heading text-center mb-60">
           <div class="sub-heading">
               <span>Our Customers Feedbacks</span>
           </div>
           <h2>What Our Customers Are Talking <br>About Our Services</h2>
        </div>
        <div id="testimonials-carousel" class="carousel slide" data-bs-ride="carousel">
          <div class="testimonisals-nav carousel-indicators">
                <div data-bs-target="#testimonials-carousel" data-bs-slide-to="0" aria-label="Slide 1">
                     <div class="testi-box">
                        <div class="testi-thumb">
                            <img src="assets/img/testi-thumb-1.png" alt="testi">
                        </div>
                        <div class="testi-info">
                            <h3>Shakit Willamson</h3>
                            <h4>Customers</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item">
                    <div class="testi-item">
                        <ul class="ratings">
                            <li><i class="fas fa-star"></i></li>
                        </ul>
                        <div class="testi-content">
                            <h3>Clean and dispose well</h3>
                            <p>There are many variations of passages of Lorem Ipsum available, but the majority suffered alteration in some form, by injected humour, or randomised words which don't look slightly believable. If you are going to use a passage </p>
                        </div>
                        <div class="author-item">
                            <div class="author-item-box">
                                <img src="assets/img/testi-thumb-1.png" alt="img">
                                <div class="author-content">
                                    <h3>Shakit Willamson</h3>
                                    <h4>Customer</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section><!-- ./ testimonial-section -->


<section class="project-section padding">
	<div class="container">
	   <div class="section-heading text-center mb-60">
		   <div class="sub-heading">
			   <span>Recent Closed Projects</span>
		   </div>
		   <h2>Recently We Successfully <br>Completed Some Waste Projects</h2>
		</div>
		<div class="outside-spacing">
			<div class="project-carousel swipper">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="project-img">
							<img src="assets/img/project-1.jpg" alt="project">
							<div class="project-content">
								<span>Waste Pickup</span>
								<h3>Heavy Material Trash</h3>
								<p>Duis aute irure dolor in reprehenderit voluptate <br> cillum dolore eu fugiat nulla pariatur. </p>
							</div>
							<div class="project-btn">
								<a href="project.html"><i class="fa-regular fa-arrow-up-right"></i></a>
							</div>
						</div>
					</div>
				</div>
				<!-- Carousel Arrows -->
				<div class="swiper-arrow">
					<div class="swiper-nav swiper-next"><i class="fa-regular fa-arrow-right-long"></i></div>
				</div>
				<!-- Carousel Dots -->
				<div class="swiper-pagination"></div>
			</div>
		</div>
		<div class="section-footer text-center">
			<p>Challenges are just opportunities in disguise. <a href="project.html"><span>Take the challenge</span></a></p>
		</div>
	</div>
</section><!-- project-section -->

11) Content Section - top


<section class="content-section">
	<div class="container">
		<div class="bg"></div>
		<div class="row align-items-center">
			<div class="col-lg-4 col-md-12">
				<div class="content-info">
					<div class="content-item">
						<i class="fa-regular fa-phone-volume"></i>
						<div class="contact-name">
							<h4>Have any questions?</h4>
							<h3>+1-(246) 333-0089</h3>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-5 col-md-6">
				<div class="content-info info-2 text-center">
					<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatu aut odit aut fugit, sed quia consequuntur magni dolores eos rvoluptatem nesciunt. Neque porro quisquam est, </p>
				</div>
			</div>
			<div class="col-lg-3 col-md-6">
				<div class="content-info info-3">
					<a href="about-us.html" class="default-btn">Explore More <span></span></a>
				</div>
			</div>
		</div>
	</div>
</section><!-- ./ content-section -->

12) Promo Section - top


<section class="promo-section padding">
	<div class="container">
	   <div class="section-heading text-center mb-60">
		   <div class="sub-heading">
			   <span>Why Choose us</span>
		   </div>
		   <h2>Few Reasons Why You Choose <br>Us To Protect Nature!</h2>
		</div>
		<div class="row">
			<div class="col-lg-3 col-md-6 sm-padding">
				<div class="promo-box">
					<div class="promo-icon">
						<svg id="Layer_1" height="50" viewBox="0 0 512 512" width="50" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m4 317.982 56.378 32.549a8 8 0 0 0 10.928-2.931l2.031-3.518 32.65 19.116a31.815 31.815 0 0 0 -1.163 8.525 31.288 31.288 0 0 0 9.2 22.279 31.409 31.409 0 0 0 22.279 9.214c.607 0 1.215-.024 1.822-.058-.034.6-.056 1.2-.056 1.81a31.411 31.411 0 0 0 31.479 31.479c.61 0 1.217-.022 1.822-.056-.034.605-.057 1.212-.057 1.822a31.411 31.411 0 0 0 31.479 31.48 31.915 31.915 0 0 0 6.592-.69 26.3 26.3 0 0 0 26.02 22.072 26.489 26.489 0 0 0 9.263-1.662l1.589 1.587a26.371 26.371 0 0 0 44.685-14.36 31.794 31.794 0 0 0 6.589.7 31.451 31.451 0 0 0 31.435-33.314c.6.034 1.2.055 1.81.055a31.429 31.429 0 0 0 31.436-33.3c.6.034 1.2.055 1.81.055a31.51 31.51 0 0 0 25.732-49.652l44.133-25.376 6.808 11.792a8 8 0 0 0 10.928 2.928l56.378-32.546a8 8 0 0 0 2.928-10.928l-73.941-128.069a8 8 0 0 0 -10.927-2.928l-56.378 32.55a8 8 0 0 0 -2.928 10.928l6.539 11.326-9.346 3.539a19.014 19.014 0 0 1 -13.408.271l-62.315-20.771a27.47 27.47 0 0 0 -21.235 1.448l-12.4 6.112c-.117-.07-.23-.145-.353-.21l-14.771-7.8a27.745 27.745 0 0 0 -25.91-.158l-19.718 10.1a10.3 10.3 0 0 1 -4.888 1.309l-47 .538 3.294-5.707a8 8 0 0 0 -2.928-10.928l-56.375-32.547a8 8 0 0 0 -10.927 2.928l-73.941 128.069a8 8 0 0 0 2.928 10.928zm121.337 64.71a15.575 15.575 0 0 1 0-21.932l28.132-28.132a15.508 15.508 0 0 1 21.93 21.933l-28.13 28.131a15.528 15.528 0 0 1 -21.932 0zm33.246 33.245a15.575 15.575 0 0 1 -.007-21.925l.007-.007 28.132-28.131a15.508 15.508 0 0 1 21.931 21.931l-28.132 28.132a15.526 15.526 0 0 1 -21.931 0zm33.245 33.245a15.525 15.525 0 0 1 0-21.932l28.131-28.131a15.508 15.508 0 0 1 21.932 21.932 8 8 0 0 0 -.743.871 26.481 26.481 0 0 0 -2.394 2.112l-22.012 22.01a26.686 26.686 0 0 0 -2.116 2.4 8.041 8.041 0 0 0 -.867.74 15.525 15.525 0 0 1 -21.931-.002zm36.23 22.875a10.4 10.4 0 0 1 0-14.7l22.01-22.01a10.393 10.393 0 0 1 14.7 14.7l-22.01 22.01a10.447 10.447 0 0 1 -14.7 0zm44.209 7.633a10.4 10.4 0 0 1 -14.6.086l14.689-14.689a10.4 10.4 0 0 1 -.089 14.603zm36.233-22.874a15.525 15.525 0 0 1 -21.93 0 7.9 7.9 0 0 0 -.872-.743 26.481 26.481 0 0 0 -2.112-2.394l-1.531-1.531a26.353 26.353 0 0 0 -20.331-35.474 31.749 31.749 0 0 0 .143-12.493 15.524 15.524 0 0 1 18.5 2.572l28.133 28.132a15.524 15.524 0 0 1 0 21.931zm33.246-33.245a15.577 15.577 0 0 1 -21.93 0l-28.133-28.132a15.508 15.508 0 0 1 21.917-21.939v.006l28.132 28.131a15.525 15.525 0 0 1 .009 21.934zm33.244-33.245a15.523 15.523 0 0 1 -21.929 0l-28.133-28.132a15.508 15.508 0 0 1 21.931-21.931l28.128 28.137a15.576 15.576 0 0 1 0 21.931zm52.147-196.412 65.94 114.211-42.522 24.55-65.946-114.212zm-153.074 35.786a11.33 11.33 0 0 1 9.1-.62l62.316 20.772a35.149 35.149 0 0 0 24.136-.487l11.785-4.465 44.489 77.055-47.439 27.276-20.281-20.282a31.385 31.385 0 0 0 -7.269-5.418l-63.775-47.811a26.418 26.418 0 0 0 -13.941-5.2l-9.371-.827a27.66 27.66 0 0 0 -26.5 13.531l-12.423 20.429a1.837 1.837 0 0 1 -1.957.944l-18.9-2.38a2 2 0 0 1 -1.674-2.527l9.9-35.1a11.412 11.412 0 0 1 6.244-7.506zm-84.93 11a26.137 26.137 0 0 0 12-3.067l19.718-10.1a11.634 11.634 0 0 1 11.149.067l4.891 2.581-25.466 12.553a27.307 27.307 0 0 0 -14.569 17.513l-9.9 35.1a18 18 0 0 0 15.074 22.746l18.9 2.379a17.78 17.78 0 0 0 17.627-8.5l12.424-20.428a11.8 11.8 0 0 1 11.422-5.908l9.37.827a10.465 10.465 0 0 1 5.751 2.064l45.365 34.009a31.418 31.418 0 0 0 -18.483 28.7c0 .606.022 1.209.055 1.81a31.429 31.429 0 0 0 -33.3 31.435c0 .607.022 1.209.055 1.81a31.586 31.586 0 0 0 -16.264 3.435c-.556-.654-1.134-1.3-1.751-1.913a31.435 31.435 0 0 0 -24.1-9.156c.034-.6.055-1.2.055-1.81a31.43 31.43 0 0 0 -33.285-31.447 31.431 31.431 0 0 0 -31.435-33.289 31.289 31.289 0 0 0 -22.28 9.2l-28.081 28.089-32.738-19.171 51.314-88.88zm-104.265-46.786 42.522 24.549-65.941 114.212-42.521-24.55zm171.132 6.875a93.751 93.751 0 1 0 -93.75-93.751 93.858 93.858 0 0 0 93.75 93.751zm0-171.5a77.751 77.751 0 1 1 -77.75 77.75 77.839 77.839 0 0 1 77.75-77.751zm-35.588 78.126a8 8 0 0 1 12.943-9.407l12.245 16.852 40.763-33.392a8 8 0 0 1 10.139 12.377l-47.321 38.764a8 8 0 0 1 -11.541-1.485z"/></svg>
					</div>
					<div class="promo-content">
						<a href="about-us.html"><h3>Trust & Peace</h3></a>
						<p>Nemo enim ipsam voluptatem voluptas sit aspernatu aut odit aut magni dolores eos qui ratione</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section><!-- ./ promo-section -->

13) Cta Section - top


<section class="cta-section padding">
   <div class="overlay"></div>
	<div class="container">
		<div class="cta-content text-center">
			<div class="section-heading">
			   <div class="sub-heading">
				   <span>Have you project in mind?</span>
			   </div>
			   <h2>Let’s make something <br>great together!</h2>
			   <a href="contact.html" class="default-btn">Continue With Us <span></span></a>
			</div>
		</div>
	</div>
</section><!-- ./ cta-section -->

14) Rent Section - top


<section class="rent-section">
	<div class="container">
		<div class="row align-items-center">
			<div class="col-lg-8 sm-padding">
				<div class="rent-content">
					<div class="section-heading">
					   <div class="sub-heading">
						   <span>Start Service</span>
					   </div>
					   <h2>Start Your Waste Connections Garbage <br> Pickup or Dumpster Rental Today</h2>
					</div>
				</div>
			</div>
			<div class="col-lg-4 sm-padding">
				<div class="rent-box text-center">
					<h4>Call us today at </h4>
					<h3>+1-(246) 333-0089</h3>
					<a href="contact.html" class="default-btn">Request Quote</a>
				</div>
			</div>
		</div>
	</div>
</section><!-- ./ rent-section -->

15) Sponsor Section - top


<section class="sponsor-section bg-pink padding">
	<div class="container">
		<div class="outside-spacing">
			<div class="sponsor-carousel swipper">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="sponsor-item text-center">
							<a href="contact.html"><img src="assets/img/sponsor-1.jpg" alt="sponsor"></a>
						</div>
					</div
				</div>
				<!-- Carousel Arrows -->
				<div class="swiper-arrow">
					<div class="swiper-nav swiper-next"><i class="fa-regular fa-arrow-right-long"></i></div>
				</div>
				<!-- Carousel Dots -->
			</div>
		</div>
	</div>
</section><!-- ./ sponsor-section -->

16) Blog Section - top


<section class="blog-section padding bd-bottom">
	<div class="container">
		<div class="section-heading text-center mb-60">
		   <div class="sub-heading">
			   <span>OUR NEWS FROM BLOG</span>
		   </div>
		   <h2>Latest news, advices & best <br>posts from the blog</h2>
		</div>
		<div class="outside-spacing">
			<div class="blog-carousel swipper">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="post-card">
							<div class="post-thumb">
								<img src="assets/img/blog-1.jpg" alt="post">
								<div class="post-content-wrap">
									<ul class="post-meta">
										<li><i class="fa-regular fa-calendar-days"></i>January 03, 2023</li>
									</ul>
									<div class="post-content">
										<h3><a href="blog-details.html" class="hover">Have Clean & Healthy <br>Future with us Increase <br>Power</a></h3>
										<a href="blog-classic.html" class="read-more">Read More<i class="fa-regular fa-arrow-up-right"></i></a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- Carousel Dots -->
				<div class="swiper-pagination"></div>
			</div>
		</div>
		<div class="blog-btn-wrap">
			<div class="blog-btn text-center">
				<a href="project.html"><i class="fa-regular fa-arrow-up-right"></i></a>
			</div>
		</div>
	</div>
</section><!-- ./ blog-section -->

17) Social Section - top


<section class="social-section bd-bottom">
	<div class="container">
		<div class="row">
			<div class="col-md-2 sm-padding">
				<div class="social-item bd-right">
					<div class="social-icon">
						<a href="#"><i class="fab fa-facebook-f"></i></a>
					</div>
					<h4><a href="#">Facebook</a></h4>
				</div>
			</div>
		</div>
	</div>
</section><!--./ social-section -->

18) Connect Section - top


<section class="connect-section bg-pink padding">
	<div class="container">
		<div class="section-heading text-center mb-60">
		   <div class="sub-heading">
			   <span>About Waste Connections</span>
		   </div>
		   <h2>The Leading Waste Management <br>Market Since 1990</h2>
		</div>
		<div class="row">
			<div class="col-lg-2 col-md-4 padding-15">
				<div class="cn-box">
					<div class="cn-thumb">
						<img src="assets/img/cn-1.jpg" alt="cn">
						<div class="cn-icon">
							<a href="#"><img src="assets/img/insta.png" alt="insta"></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section><!-- ./ connect-section -->

19) Widget Section - top


<section class="widget-section padding">
	<div class="container">
		<div class="message-box">
			<div class="message-content">
				<h3>Signup For Our Newsletter</h3>
				<h4>Sign up to get latest articles from our cleaning programs</h4>
			</div>
			<div class="message-form">
				<form action="#" class="wt-subscribe-form">
					<input class="form-control" type="email" name="email" placeholder="Enter Your Email Address" required="">
					<input type="hidden" name="action" value="mailchimpsubscribe">
					<button class="submit">Subscribe<i class="fa fa-location-arrow"></i></button>
					<div class="clearfix"></div>
				</form>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-3 col-md-6 sm-padding">
				<div class="widget-box">
					<div class="widget-header">
						<h3>The Address</h3>
						<p>Valentin, Street Road 24, New York, <br>USA - 67452</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section><!-- ./ widget-section -->

 

C) CSS Files and Structure - top

These are the css files:

  1. bootstrap.min.css
  2. animate.min.css
  3. fontawesome.min.css
  4. keyframe-animation.css
  5. odometer.min.css
  6. swiper.min.css
  7. slider.css
  8. venobox.min.css
  9. spotlight.css
  10. main.css
  11. responsive.css

 

D) JavaScript - top

This theme use these Javascript files:

  1. modernizr-2.8.3-respond-1.4.2.min.js
  2. jquary-3.6.0.min.js
  3. jquery.ajaxchimp.min.js
  4. bootstrap.min.js
  5. popper.min.js
  6. odometer.min.js
  7. waypoints.min.js
  8. venobox.min.js
  9. spotlight.min.js
  10. masonry-docs.min.js
  11. swiper.min.js
  12. imagesloaded.pkgd.min.js
  13. jquery.isotope.v3.0.2.js
  14. vendor/wow.min.js
  15. contact.js
  16. slider.js
  17. main.js

You can edit the contact.js files. for setting contact form

F) Sources and Credits - top

  1. Bootstrap v5.0.2
  2. Slick Carousel
  3. WOW JS
  4. VenoBox
  5. Smooth Scroll
  6. YTPlayer
  7. AjaxChimp

G) PHP Code Explanation - top

There are only one php code for contact page which is contact.php, open this file and change the email and subject on line 24 and line 27. No need to edit other code unless you really want to.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

techsometimes

Go To Table of Contents